<template>
	<section id="homeNav">
		<ul class="home_navList" :style="'width:'+ (navList.length*3.5)+'rem'">
			<li :class="item.key == selectMenu ? 'select_navLi' : 'home_navLi'" v-for="(item,index) in navList" :key="index" @click="selectThisFunc(item)">
				<!--<router-link :to="'/home/'+ item.key">-->
					<span>{{item.name}}</span>
				<!--</router-link>-->
			</li>
		</ul>
	</section>
</template>

<script>
	export default {
		data() {
			return {
				selectMenu: 'toutiao',
				navList: [{
						name: '头条',
						key: 'toutiao'
					},
					{
						name: '社会',
						key: 'shehui'
					},
					{
						name: '国内',
						key: 'guonei'
					},
					{
						name: '国际',
						key: 'guoji'
					},
					{
						name: '娱乐',
						key: 'yule'
					},
					{
						name: '科技',
						key: 'keji'
					},
					{
						name: '军事',
						key: 'junshi'
					},
					{
						name: '时尚',
						key: 'shishang'
					},
					{
						name: '财经',
						key: 'caijing'
					},
					{
						name: '游戏',
						key: 'youxi'
					},
					{
						name: '汽车',
						key: 'qiche'
					},
					{
						name: '笑话',
						key: 'xiaohua'
					},
					{
						name: '健康',
						key: 'jiankang'
					},
					{
						name: '体育',
						key: 'tiyu'
					},
					{
						name: '星座',
						key: 'xingzuo'
					},
					{
						name: '科学 ',
						key: 'kexue'
					},
					{
						name: '互联网 ',
						key: 'hulianwang'
					},
					{
						name: '数码',
						key: 'shuma'
					}
				]
			};
		},
		components: {},
		methods: {
			selectThisFunc (item){
				this.selectMenu = item.key;
				this.$root.bus.$emit("changeType", item);
			},
		},
		mounted() {
		},
		computed: {

		}
	};
</script>
<style scoped lang="scss">
	#homeNav {
		width: 100%;
		background: #fff;
		overflow-x: auto;
		.home_navList {
			height: 80px;
			border-bottom: 1px solid rgb(224, 220, 220);
			.home_navLi{
				width: 3.5rem;
				text-align: center;
				line-height: 80px;
				float: left;
				font-size: 26px;
				background: #fff;
				span{
					color: #000;
				}
			}
			.select_navLi{
				width: 3.5rem;
				text-align: center;
				line-height: 80px;
				float: left;
				font-size: 26px;
				// background: red;
				span{
					color: #ff0000;
					font-weight: bold;
				}
			} 
		}
	}
</style>